<template>
	<view>
		<!-- 主体表单 -->
		<view class="main2">
			<view class="item">
				<image class="login_image" src="/static/images/userName.png"></image>
				<input class="main-input" type="number" v-model="phoneData" placeholder="请输入手机号" maxlength="11" />
			</view>
			<view style="margin-top: 8px"></view>
			<view class="item">
				<image class="login_image" src="/static/images/code.png"></image>
				<view class="type">
					<input v-model="code" class="main-input-code" maxlength="6" type="number" placeholder="请输入验证码" />
					<getCode codeText="获取验证码" setTime="60" ref="runCodes" @setCode="sendMsg()"></getCode>
				</view>
			</view>
			<view style="margin-top: 8px"></view>
			<view class="item">
				<image class="login_image" src="/static/images/password.png"></image>
				<view class="type">
					<input v-model="passData" class="main-input-code" maxlength="20" type="password" placeholder="请设置密码" />
				</view>
			</view>
		</view>
		<view class="btn_login" @click="startRegister">注册</view>
		<!-- 底部信息 -->
		<view class="register_footer">
			<text @tap="isShowAgree" class="cuIcon" :class="showAgree?'cuIcon-radiobox':'cuIcon-round'">同意
			</text>
			<!-- 协议地址 -->
			<navigator url="/pages/users/xieyi/xieyi" open-type="navigate">《用户服务协议》</navigator>和
			<navigator url="/pages/users/xieyi/yingsi" open-type="navigate">《用户隐私协议》</navigator>
		</view>
	</view>
</template>

<script>
	var _this;
	import {
		loginH5,
		loginMobile,
		registerVerify,
		register,
		registerUser,
		resetPassword
	} from "@/api/user";

	export default {
		data() {
			return {
				//logo图片 base64
				logoImage: '',
				phoneData: '', //用户/电话
				passData: '', //密码
				showAgree: false,
				email: '', //企业邮箱
				code: '', //验证码
			};
		},

		mounted() {
			_this = this;
		},
		destroyed() {
			uni.hideKeyboard()
		},
		methods: {
			isShowAgree() {
				//是否选择协议
				_this.showAgree = !_this.showAgree;
			},
			navBack() {
				uni.navigateBack();
			},
			sendMsg() {
				let that = this;
				
				if (that.phoneData.length !=11) {
					uni.showToast({
						title: "请输入正确的手机号",
						icon:'none',
						duration:2000
					});
					return;
				}
				uni.showLoading({ title: '获取验证码中...' });
		        console.log(123123);
		
				registerVerify(that.phoneData).then(res => {
						that.$util.Tips("验证码发送成功请注意查收");
						that.$refs.runCodes.$emit('runCodes'); //触发倒计时（一般用于请求成功验证码后调用）	
						uni.hideLoading();
					}).catch(res => {
						console.log(33);
						console.log(res);
						
						that.$util.Tips({title:res});
						uni.hideLoading();
				});
			},
			toRegister() {
				let that = this;
				uni.showLoading({ title: '注册中...' });	
				registerUser({account: that.phoneData,captcha: that.code,password: that.passData})
					.then(res => {
						that.$util.Tips("注册成功，请登录");
					    setTimeout(() => {
						uni.redirectTo({
							url: '/pages/users/login/login'
						});
					    }, 1000)
						
						uni.hideLoading();
					})
					.catch(res => {
						uni.showToast({title: res,icon:'none',duration:2000});
						uni.hideLoading();
				});
			},
			startRegister() {

				if (this.phoneData.length !=11) {
					uni.showToast({title: "请输入正确的手机号",icon:'none',duration:2000});
					return;
				}
				if (this.code.length == 0) {
					uni.showToast({title: "请输入验证码",icon:'none',duration:2000});
					return;
				}
				if (this.code.length != 6) {
					uni.showToast({title: "验证码格式不正确",icon:'none',duration:2000});
					return;
				}
				if (this.passData.length < 1) {
					uni.showToast({title: "请设置登录密码",icon:'none',duration:2000});
					return;
				}
				if (this.passData.length < 6) {
					uni.showToast({title: "密码必须大于6位",icon:'none',duration:2000});
					return;
				}
				if (!this.showAgree) {
					uni.showToast({title: "请同意用户服务协议及隐私政策",icon:'none',duration:2000});
					return;
				}
						
				this.toRegister();
			},
		}
	}
</script>

<style>
	@import url('/static/css/main.css');

	.title_des {
		color: #0055b8;
		font-size: 22px;
		margin-bottom: 32px;
	}

	.login_icon_wx {
		color: #999999;
		border: none;
	}

	.type {
		display: flex;
		margin-left: 16px;
		border-bottom: 1px solid #EEEEEE;
		width: 100%;
	}

	.weixinLogin {
		color: #999999;
		text-align: center;
		font-size: 12px;
		margin-top: 60px;
	}

	.footer_des {
		color: #666666;
		text-align: center;
		font-size: 14px;
		margin-top: 40px;
	}

	.getCode {
		font-size: 14px;
		margin-left: 40px;
		color: #0055b8
	}

	.item {
		line-height: 40px;
		display: flex;
	}

	.login_image {
		margin-top: 8px;
		width: 20px;
		height: 25px;
	}

	.main-input {
		font-size: 14px;
		margin-left: 16px;
		border-bottom: 1px solid #EEEEEE;
		height: 40px;
		line-height: 40px;
	}

	.main-input-code {
		width: 70%;
		font-size: 14px;
		height: 40px;
		line-height: 40px;
	}

	.btn_login {
		color: #FFFFFF;
		font-size: 16px;
		width: 250px;
		height: 40px;
		background: #0055b8;
		border-radius: 8px;
		line-height: 40px;
		text-align: center;
		margin-left: auto;
		margin-right: auto;
		margin-top: 45px;
	}

	.main-input {
		flex: 1;
		text-align: left;
		font-size: 28 upx;
		padding-right: 10 upx;
		margin-left: 20 upx;
	}
</style>
